<template>
  <div class="article-container">
    <div class="loading" v-if="loading">
      <a-spin tip="数据加载中..." :spinning="loading"></a-spin>
    </div>
    <template v-if="data">
      <a-carousel autoplay touchMove :autoplaySpeed="3000">
        <div>
          <div class="gallery-item">
            <img :src="staticURL+data?.cover" alt="图册">
          </div>
        </div>
        <template v-if="data?.gallery?.length">
          <template v-for="item in data?.gallery">
            <div>
              <div class="gallery-item">
                <img :src="staticURL + item" alt="图册">
              </div>
            </div>
          </template>
        </template>
      </a-carousel>
      <a-affix>   
        <div class="card article-title">{{ data?.title }}</div>
      </a-affix>
      <div class="card margin-bottom-md">
        <div class="a-text-secondary margin-bottom-md">
          <a-space>
            <template #split>/</template>
            <span v-for="item in data?.category_obj">{{ item?.name }}</span>
          </a-space>
        </div>
        <a-flex class="a-text-secondary" justify="space-between">
          <span><eye-outlined/> {{ data.views }}</span>
          <span><clock-circle-outlined/> {{ data.create_time }}</span>
        </a-flex>
      </div>
      <div class="card article-fields margin-bottom-md"
          v-if="data?.custom_fields?.length">
        <a-descriptions :column="1" size="small" :labelStyle="{ width: '30%',color: 'var(--text-secondary)'}">
          <a-descriptions-item :label="item.label" v-for="item in data?.custom_fields">
            <template v-if="typeof item.value === 'object'">
              <a-tag :bordered="false" v-for="v in item.value">{{ v }}</a-tag>
            </template>
            <template v-else>
              <span>{{ item?.value }}</span>
            </template>
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="card margin-bottom-md">
        <div class="card-title">详情介绍</div>
        <div class="article-content" v-html="data?.content"></div>
      </div>
      <div class="card">
        <a-flex justify="center" gap="middle">
          <div>
            <a-avatar size="large" class="action-avatar touch" @click="onLikes()"><heart-outlined/></a-avatar>
            <div class="action-text">{{ data.likes }}</div>
          </div>
          <div>
            <a-avatar size="large" class="action-avatar touch" @click="onShare"><ShareAltOutlined /></a-avatar>
            <div class="action-text">分享</div>
          </div>
        </a-flex>
      </div>
    </template>
    <template v-else>
      <a-result status="404" title="内容不存在" sub-title="您访问的内容不存在、已删除或被禁止访问"/>
    </template>
  </div>
</template>

<script setup lang="ts">
import { getCoffeeDetail, setCoffeeLike, setCoffeeView } from '@/server/modules/home';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { staticURL } from '@/config';
import {HeartOutlined,EyeOutlined,ShareAltOutlined,ClockCircleOutlined} from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue';
import useMessage from '@/hooks/useMessage';
const data = ref<Coffee>()
const id = useRoute().params.id || 0;
const loading = ref(true)
const title = document.title;
const deviceWidth = ref<number>(375)
const getDataDetail = async () => {
  try{
    loading.value = true
    const id = useRoute().params.id || 0
    const res = await getCoffeeDetail(id as number)
    if (res.code === 200 && res.data) {
      data.value = res.data
      document.title = `${res.data.title} - ${title}`
    }
  }finally{
    setTimeout(() => {
      loading.value = false
    }, 300);
  }
}
const updateDeviceWidth = () => { 
  const container = document.querySelector('.app-layout-content') as HTMLElement
  deviceWidth.value = container.offsetWidth
}
onMounted(() => {
  getDataDetail()
  onViews()
  updateDeviceWidth()
  window.addEventListener('resize', updateDeviceWidth)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', updateDeviceWidth)
})
const onShare = () => { 
  Modal.info({
    title: '微信分享',
    content: '请点击右上角【···】转发给朋友或是分享到朋友圈',
    maskClosable:true
  });
}
const onLikes = async () => { 
 const exp = 60 * 1000* 60*24 //24x消失禁止重复点赞
  //缓存名称
  const exp_name = 'likes_exp_'+id
  //从缓存中获取上一次时间戳
  const exp_time:number =  Number(localStorage.getItem(exp_name)) || 0
  //获取当前时间戳
  const now_time = new Date().getTime()
  if((now_time - exp_time) > exp){ 
    const res = await setCoffeeLike(id as number)
    if(res.code === 200 && res.data.views){
      localStorage.setItem(exp_name,now_time.toString())
      useMessage(200, '点赞成功!')
    }
  }else{
    useMessage(0, '您已经点赞过咯，请勿重复点赞!')
  }
}
const onViews = async () => {
  const exp = 60 * 1000 //1分钟时间戳
  //缓存名称
  const exp_name = 'view_exp_'+id
  //从缓存中获取上一次增加浏览数量的时间戳
  const exp_time:number =  Number(localStorage.getItem(exp_name)) || 0
  //获取当前时间戳
  const now_time = new Date().getTime()
  if((now_time - exp_time) > exp){ 
    const res = await setCoffeeView(id as number)
    if(res.code === 200 && res.data.views){
      localStorage.setItem(exp_name,now_time.toString())
    }
  }
}
</script>

<style scoped>
.gallery-item {
  width: 100%;
  overflow: hidden;
  background: #364d79;
  aspect-ratio: 1/1;
  height: v-bind(deviceWidth) px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card {
  background-color: #fff;
  padding: 16px;
}

.article-title {
  font-size: 1.6rem;
  margin-bottom: var(--space-md);
}

.article-content img {
  max-width: 100%;
}

.card-item {
  padding: 8px 0;
}

.card-item+.card-item {
  border-top: 1px solid #f0f0f0;
}

.card-item-label {
  display: inline-block;
  width: 30%;
}
.card-title {
  padding-bottom: var(--space-md);
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid #f0f0f0;
}
.action-avatar{
  background-color: transparent;
  color: rgba(0, 0, 0, 0.75);;
  border-color: #f0f0f0;
  font-size: 16px;
}
.action-text {
  text-align: center;
  padding-top: var(--space-sm);
  color: var(--text-secondary);
}
.touch,
.touch * {
  touch-action: manipulation; /* 减少点击延迟 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); /* 移除默认点击高亮色 */
  user-select: none; /* 禁止文本选择 */
}

.touch:active {
  color: #fff;
  background-color: var(--color-primary);
  border-color: transparent;
}
.loading {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, .95);
  z-index: 666;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>